<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>酒店列表</title>
		<script src="__INDEX__/js/mui.min.js"></script>
		<link href="__INDEX__/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="__INDEX__/css/mui.picker.min.css" />
		<link rel="stylesheet" href="__INDEX__/css/iconfont.css" />
		<link rel="stylesheet" href="__INDEX__/css/style.css" />
		<link rel="stylesheet" href="__INDEX__/css/member.css" />	
		<link rel="stylesheet" href="__INDEX__/css/index.css" />	
		<style type="text/css">
			.sy_tjinfo{padding: 2% 0 0;}
			.sy_tjnam,.sy_ypt_yj{padding: 0 3%;}
			.list_pribox{background: #F6F6F6; padding-left: 3%;}
			.list_pricon{padding-left: 0; margin-bottom: 5px;}
			.sy_tjyj{float: none; padding-left: 3%;}
			.index_slider{height: 200px;}		
			.mui-content{background-color: #FFFFFF}
			.walletd{top:-6.5rem}
			.shoplist_box{margin-top:0px;}
		</style>
	</head>

	<body class="">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">酒店列表</h1>
		</header>
		<div class="mui-content index_con">	
			<div><img src="__INDEX__/img/hotel.jpg" /></div>
			<div style="position: relative;">
				<div class="walletd">
		    	<ul class="walletlis1 clearfix">
		    		<li id="yj" data-options='{"type":"date"}' class="start_btn">
		    			<p><em style="color: #2a7bd4;" id='result'>{$start_time}</em></p>
		    			<p>入住日期</p>
		    		</li>
		    		<li id="yu" data-options='{"type":"date"}' class="end_btn">
		    			<p><em style="color: #2a7bd4;" id='result2'>{$end_time}</em></p>
		    			<p>退房日期</p>
		    		</li>
		    	</ul>
		    	<div class="time">时长<em id='live_date'>1</em>天</div>
		    	</div>
			</div>
		</div>
		
		<div class="shoplist_box">
			<ul class="index_sjlist" id="store_ul">
				{volist name='$hotel_list' id='vo'}
					<li><a href="#" class="clearfix" onclick="house_list('{$vo['id']}')"><div class="index_sjimg"><img src="{$vo.thumb|getUrl}"></div><div class="index_sjinfo"><div class="index_spname"><span style="float: right;font-size: 12px;">0m</span>{$vo.store_name}</div><div class="index_spadr clearfix"><div class="index_spadr_l"><span class="iconfont icon-dingwei"></span>{$vo['store_address']}</div><div class="index_spadr_r"><button class="btn-sub">查看</button></div></div></div></a></li>
				{/volist}
			</ul>
		</div>
		
		
	</body>

</html>

<script src="__INDEX__/js/mui.picker.min.js"></script>
<script src="__INDEX__/js/jquery.js"></script>
<script>
	(function($) {
		$.init();
		var btns = $('.start_btn');
		var btns2 = $('.end_btn');

		//入住时间
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {
					var oDate1 = new Date("{$start_time}");
				    var oDate2 = new Date(rs.text);
				    if(oDate2.getTime() < oDate1.getTime()){
				        return  result.innerText ="{$start_time}";
				    }
					result.innerText = rs.text; //赋值选择的日期
					_self.picker.dispose();
					_self.picker = null;
					js_days();
				});
			}, false);
		});
		
		//退房时间
		btns2.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				var optionsJson = this.getAttribute('data-options') || '{}';
				var options = JSON.parse(optionsJson);
				var id = this.getAttribute('id');
				_self.picker = new $.DtPicker(options);
				_self.picker.show(function(rs) {
					//比较日期
					var oDate1 = new Date(jQuery("#result").text());
				    var oDate2 = new Date(rs.text);
				    if(oDate2.getTime() < oDate1.getTime()){
				    	result2.innerText = addDate(jQuery('#result').text());
				        return mui.toast('退房日期不能小于入住日期');
				    }
					result2.innerText = rs.text; //赋值选择的日期
					_self.picker.dispose();
					_self.picker = null;
					js_days();
				});
			}, false);
		});
		
		js_days();
	})(mui);
	
	function js_days(){
		//计算相差的天数
		var s1 = new Date(jQuery("#result").text());
		var s2 = new Date(jQuery("#result2").text());
		var days = s2.getTime() - s1.getTime();
		var time = parseInt(days / (1000 * 60 * 60 * 24));
		if(time<=0){time=1;}
		live_date.innerText=time;
	}
	
	//时间加一天
	function addDate(date) {
	    var date = new Date(date);
	    date.setDate(date.getDate() + 1);
	    var month = date.getMonth() + 1;
	    var day = date.getDate();
	    return date.getFullYear() + '-' + getFormatDate(month) + '-' + getFormatDate(day);
	}
	
	function getFormatDate(arg) {
	    if (arg == undefined || arg == '') {
	        return '';
	    }
	    var re = arg + '';
	    if (re.length < 2) {
	        re = '0' + re;
	    }
	    return re;
	}
	
	function house_list(id){
		start_time = $('#result').text();
		end_time = $('#result2').text();
		window.location.href="/index/index/house_list?start_time="+start_time+'&end_time='+end_time+'&id='+id;
	}
</script>

